<template>
    <div>
        <div class="flex items-center">
            当前位置：
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/notice' }">
                    公告信息
                </el-breadcrumb-item>
                <el-breadcrumb-item>{{newsDetail.title}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="flex gap-4 mt-5">
            <div class="w-[1200px] bg-body rounded-[8px] flex-none p-5">
              <div class="border-b border-br pb-4">
                <div>
                    <span class="font-medium text-[22px]">
                        {{ newsDetail.title }}
                    </span>
                </div>
                <div
                    class="mt-3 text-tx-secondary flex items-center flex-wrap"
                >
                  <div class="flex items-center" v-if="newsDetail.createName">
                    <Icon name="el-icon-Avatar" />
                    <span>{{ newsDetail.createName }} &nbsp;|&nbsp;</span>
                  </div>
                  <div class="mr-4 flex items-center">
                    <Icon name="el-icon-Avatar" />
                    <span>{{ newsDetail.startTime }} ~ {{newsDetail.endTime}}</span>
                  </div>
                  <div class="flex items-center">
                    <Icon name="el-icon-View" />
                    <span>&nbsp;{{ newsDetail.click }}人浏览</span>
                  </div>
                </div>
              </div>
                <div
                    v-if="newsDetail.description"
                    class="bg-page mt-4 p-3 rounded-lg"
                >
                    摘要：{{ newsDetail.description }}
                </div>
                <div class="py-4 post-content" v-html="newsDetail.content"></div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import {ElBreadcrumb, ElBreadcrumbItem, ElButton} from 'element-plus'
import {getNoticeDetail} from "~/api/notcie";
const route = useRoute()
const { data: newsDetail, refresh } = await useAsyncData(
    () =>
        getNoticeDetail({
            id: route.params.id
        }),
    {
        initialCache: false
    }
)
</script>
<style lang="scss">
.post-content p{
    margin-bottom: 16px !important;
    line-height: 1.6;
    font-size: 16px;
    text-indent: 2em;
    text-align: left;
}

</style>
